<template>
  <div>
    <a-card class="card" title="输入护士信息" :bordered="false">
      <a-form :form="form" class="form" @submit="handleSubmit">
        <a-row class="form-row" :gutter="16">
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item label="id">
              <a-input
                placeholder="请输入ID"
                v-model="data.id"
                v-decorator="[
                  'id',
                  {initialValue: data.id, rules: [{ required: true, message: '请输入id', whitespace: true}]}
                ]"
                readOnly/>
            </a-form-item>
          </a-col>
          <a-col :xl="{span: 6, offset: 1}" :lg="6" :md="12" :sm="24">
            <a-form-item label="姓名">
              <a-input
                placeholder="请输入姓名"
                v-model="data.name"
                v-decorator="[
                  'name',
                  {initialValue: data.name, rules: [{required: true, message: '请输入姓名', whitespace: true},{pattern: /[\w\u4e00-\u9fa5]/g,message: '输入正确姓名'}]}
                ]"/>
            </a-form-item>
          </a-col>
          <a-col :xl="{span: 6, offset: 1}" :lg="6" :md="12" :sm="24">
            <a-form-item label="年龄">
              <a-input
                placeholder="请输入年龄"
                v-model="data.age"
                v-decorator="[
                  'age',
                  {initialValue: data.age, rules: [{ required: true, message: '请输入年龄', whitespace: true},{ digits: true, message: '输入正确的年龄'}]}
                ]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item
              label="性别">
              <a-select
                placeholder="请选择性别"
                v-model="data.gender"
                v-decorator="[ 'gender', {initialValue:data.gender === 0 ? '男':'女',rules: [{ required: true, message: '请选择性别'}]} ]">
                <a-select-option value="0">男</a-select-option>
                <a-select-option value="1">女</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" :xl="{span: 6, offset: 1}">
            <a-form-item
              label="证件类型">
              <a-select
                placeholder="请选择证件类型"
                v-model="data.carType"
                v-decorator="[ 'carType', {initialValue: carTypeFilter(data.carType),rules: [{ required: true, message: '请选择证件类型'}]} ]">
                <a-select-option v-for="c in cl" :key="c.key">{{ c.text }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="{span: 6, offset: 1}" :lg="6" :md="12" :sm="24">
            <a-form-item label="证件号">
              <a-input
                placeholder="请输入证件号"
                v-model="data.carId"
                v-decorator="[
                  'carId',
                  {initialValue:data.carId,rules: [{ required: true, message: '请输入证件号', whitespace: true},{pattern : /[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]/, message: '输入正确的身份证号'}]}
                ]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item label="电话号码">
              <a-input
                placeholder="请输入电话号码"
                v-model="data.phone"
                v-decorator="[
                  'phone',
                  {initialValue: data.phone ,rules: [{ required: true, message: '请输入电话号码', whitespace: true},{ pattern : /[1][3,4,5,7,8][0-9]{9}/,message: '请输入正确的电话号码' }]}
                ]" />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" :xl="{span: 6, offset: 1}">
            <a-form-item
              label="所属部门">
              <a-select
                placeholder="所属部门"
                v-model="data.department"
                v-decorator="[ 'department', {initialValue: departmentFilter(data.department),rules: [{ required: true, message: '请选择性别'}]} ]">
                <a-select-option v-for="d in dl" :key="d.key">{{ d.text }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" :xl="{span: 6, offset: 1}">
            <a-form-item
              label="职级">
              <a-select
                placeholder="职级"
                v-model="data.level"
                v-decorator="[ 'Rank', {initialValue:nurseLevelFilter(data.level),rules: [{ required: true, message: '请选择职级'}]} ]">
                <a-select-option v-for="n in nl" :key="n.key">{{ n.text }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item
          :wrapperCol="{ span: 24 }"
          style="text-align: center"
        >
          <a-button htmlType="submit" type="primary" @click="handleSubmit(e)" :loading="loading">提交</a-button>
          <a-button style="margin-left: 8px" @click="goback">返回</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script>
import { getNurse, updateNurse } from '../../api/nurse'
import { nurseLevelList, departmentList, carTypeList, departmentFilter, nurseLevelFilter, carTypeFilter } from '../../dictionary'
export default {
  name: 'EditNurse',
  data () {
    return {
      loading: false,
      data: null,
      form: this.$form.createForm(this),
      dl: departmentList,
      cl: carTypeList,
      nl: nurseLevelList
    }
  },
  methods: {
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.loading = true
          updateNurse(this.data).then(res => {
            this.$router.push('/nurse/index')
            this.$notification.success({
              message: '成功',
              description: `修改成功`
            })
          }).catch(err => {
            console.log('err', err)
            this.$notification.error({
              message: '失败',
              description: `修改失败`
            })
            this.loading = false
          })
        }
      })
    },
    goback () {
      this.$router.push('/nurse/index')
    },
    departmentFilter,
    nurseLevelFilter,
    carTypeFilter
  },
  created () {
    this.id = this.$route.query.id // 获取路径参数 id
    if (this.id === undefined || this.id === null) {
      this.$router.push('/nurse/index')
    }
    console.log('id:', this.id)
    getNurse(this.id).then(res => { // 调用 getNurseById api 获取该 id 下的用户数据
      console.log('res', res)
      this.data = res.result
    }).catch(err => {
      console.log('err', err)
    })
  }
}
</script>
